<template>
    <div class="main-section">
        <div class="video-container">
          <video
            id="video"
            :src="video.vSrc"
            width="730"
            height="450"
            controls
            muted="muted"
            autoplay
            loop="loop"
          ></video>
        </div>
        <div class="movie-info clearfix">
          <div class="text">
            <div class="movie-info-title" title="">
              <router-link active-class="active" :to="{ name: 'toDetail',params: { id: MovieInfo.id } }">{{MovieInfo.mName}}</router-link>
            </div>
            <div class="movie-info-meta">
              <div class="movie-desc">{{MovieInfo.mDate}} 中国大陆上映&nbsp;&nbsp;{{getType(MovieInfo.mType)}}</div>
              <div class="movie-ver"></div>
            </div>
          </div>
        </div>
      </div>
</template>

<script>
import { getVideoById } from '@/api/video'
import { mapState } from 'vuex'
export default {
  name: 'TtmsVideo',
  props: ['videoId', 'mId'],
  data () {
    return {
      video: {}
    }
  },
  computed: {
    ...mapState('detail', ['MovieInfo']),
  },
  async mounted () {
    this.$store.dispatch('detail/getMovieInfo', this.mId)
    const data = await getVideoById(this.videoId)
    this.video = data.data
  },

  methods: {
    getType(type){
      //type是一个对象数组,里面的属性为id和name，我要返回name，中间用逗号隔开
      return type.map(t => t.name).join(',')
    }
  }
}
</script>

<style lang="scss" scoped>
.main-section {
  width: 730px;
  float: left;
}
.video-container {
  height: 450px;
  background: #000;
  margin-bottom: 10px;
}
.movie-info {
  font-size: 12px;
  line-height: 1.8;
  margin-bottom: 14px;
}

.movie-info .text {
  float: left;
}

.movie-info .movie-info-title {
  width: 550px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.movie-info .movie-info-title a {
  font-size: 18px;
  color: #fff;
  text-decoration: none;
}

.movie-info .movie-desc,
.movie-info .score {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.clearfix:after,
.clearfix:before {
  content: " ";
  display: table;
}
.movie-ver {
  background: #0084ff;
  font-size: 12px;
  -webkit-transform: scale(0.66);
  -ms-transform: scale(0.66);
  transform: scale(0.66);
  padding: 0 4px;
  display: inline-block;
  vertical-align: middle;
  margin-left: -10px;
}
.movie-info .movie-desc, .movie-info .score {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.movie-info .movie-desc {
    vertical-align: middle;
    display: inline-block;
    max-width: 496px;
}
.m-name:hover {
    text-decoration: underline;
    color: #9f3a35;
}
</style>
